var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "maishu-dilu", "react", "maishu-ui-toolkit"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const maishu_dilu_1 = require("maishu-dilu");
    const React = require("react");
    const ui = require("maishu-ui-toolkit");
    let h = React.createElement;
    // let station = new StationService();
    let links = [
        { text: '请选择链接', url: '' },
        { text: '店铺主页', url: '#home_index' },
        { text: '购物车', url: '#shopping_shoppingCart' },
        { text: '会员主页', url: '#user_index' },
        { text: '商品类别', url: '#home_class' }
    ];
    let icons = [
        "icon-home", "icon-shopping-cart", "icon-user", "icon-comment",
        "icon-rss", "icon-truck", "icon-reorder", "icon-calendar",
        "icon-th-large"
    ];
    class MenuItemDialog extends React.Component {
        constructor(props) {
            super(props);
            this.state = { currentItem: {} };
        }
        componentDidMount() {
            let { required } = maishu_dilu_1.rules;
            this.validator = new maishu_dilu_1.FormValidator(this.element, { name: "name", rules: [required()] }, { name: "url", rules: [required()], condition: () => this.isCustomUrl() });
        }
        save() {
            return __awaiter(this, void 0, void 0, function* () {
                let isValid = yield this.validator.check();
                if (!isValid) {
                    return;
                }
                this.props.configrm(this.state.currentItem);
                this.hide();
                return Promise.resolve();
            });
        }
        show(item) {
            item = item || {};
            this.validator.clearErrors();
            this.setState({ currentItem: item });
            ui.showDialog(this.element);
        }
        hide() {
            ui.hideDialog(this.element);
        }
        toggleIconsPanel() {
            this.iconsElement.style.display ?
                this.iconsElement.style.removeProperty('display') :
                this.iconsElement.style.display = 'none';
        }
        isCustomUrl() {
            let { currentItem } = this.state;
            if (currentItem == null)
                return false;
            let currentUrl = currentItem.url;
            let containsUrl = links.map(o => o.url).indexOf(currentUrl) >= 0;
            return !(containsUrl);
        }
        render() {
            let { showIcon } = this.props;
            let { currentItem } = this.state;
            return React.createElement("div", { className: "modal fade", ref: (e) => this.element = e || this.element },
                React.createElement("div", { className: "modal-dialog" },
                    React.createElement("div", { className: "modal-content" },
                        React.createElement("div", { className: "modal-header" },
                            React.createElement("button", { type: "button", className: "close", "data-dismiss": "modal" },
                                React.createElement("span", { "aria-hidden": "true" }, "\u00D7"),
                                React.createElement("span", { className: "sr-only" }, "Close")),
                            React.createElement("h4", { className: "modal-title" }, "\u6DFB\u52A0\u83DC\u5355\u9879")),
                        React.createElement("div", { className: "modal-body form-horizontal" },
                            React.createElement("div", { className: "form-group" },
                                React.createElement("label", { className: "col-sm-2 control-label" }, "\u540D\u79F0*"),
                                React.createElement("div", { className: "col-sm-10" },
                                    React.createElement("input", { name: "name", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u9879\u540D\u79F0", ref: (e) => {
                                            if (!e)
                                                return;
                                            this.nameInput = e || this.nameInput;
                                            e.value = currentItem.name || '';
                                            e.onchange = () => {
                                                currentItem.name = e.value;
                                            };
                                        } }))),
                            React.createElement("div", { className: "form-group" },
                                React.createElement("label", { className: "col-sm-2 control-label" }, "\u5E8F\u53F7"),
                                React.createElement("div", { className: "col-sm-10" },
                                    React.createElement("input", { name: "sortNumber", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u9879\u5E8F\u53F7", ref: (e) => {
                                            if (!e)
                                                return;
                                            e.value = currentItem.sortNumber || '';
                                            e.onchange = () => {
                                                currentItem.sortNumber = Number.parseInt(e.value);
                                            };
                                        } }))),
                            showIcon ?
                                React.createElement("div", { className: "form-group" },
                                    React.createElement("label", { className: "col-sm-2 control-label" }, "\u56FE\u6807"),
                                    React.createElement("div", { className: "col-sm-10" },
                                        React.createElement("div", { className: "input-group" },
                                            React.createElement("input", { name: "icon", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u9879\u56FE\u6807", ref: (e) => {
                                                    if (!e)
                                                        return;
                                                    e.value = currentItem.icon || '';
                                                    e.onchange = () => {
                                                        currentItem.icon = e.value;
                                                    };
                                                } }),
                                            React.createElement("div", { className: "input-group-addon", onClick: () => this.toggleIconsPanel() },
                                                React.createElement("i", { className: "icon-cog", style: { cursor: 'pointer' } })),
                                            React.createElement("div", { ref: (e) => this.iconsElement = e || this.iconsElement, style: {
                                                    position: 'absolute', height: 100, width: '100%', background: 'white',
                                                    zIndex: 10, left: 0, top: 35, border: 'solid 1px #ccc', overflowY: 'auto',
                                                    display: 'none'
                                                } },
                                                React.createElement("div", { style: { position: 'absolute', width: '100%', borderBottom: 'solid 1px #ccc', padding: '4px 6px', background: 'white' } },
                                                    React.createElement("span", null, "\u8BF7\u9009\u62E9\u56FE\u6807"),
                                                    React.createElement("i", { className: "icon-remove", style: { position: 'absolute', right: 6, top: 6 }, onClick: () => this.toggleIconsPanel() })),
                                                React.createElement("div", { style: { padding: '30px 6px 6px 6px' } }, icons.map(o => React.createElement("i", { key: o, className: o, style: { display: 'table-cell', padding: 10, fontSize: 20 }, onClick: () => {
                                                        currentItem.icon = o;
                                                        this.toggleIconsPanel();
                                                        this.setState(this.state);
                                                    } }))))))) : null,
                            React.createElement("div", { className: "form-group" },
                                React.createElement("label", { className: "col-sm-2 control-label" }, "\u94FE\u63A5*"),
                                React.createElement("div", { className: "col-sm-10" },
                                    React.createElement("input", { name: "url", className: "form-control", style: { display: this.isCustomUrl() ? null : 'none' }, ref: (e) => {
                                            if (!e)
                                                return;
                                            this.urlInput = e;
                                            e.value = currentItem.url || '';
                                            e.onchange = () => {
                                                currentItem.url = e.value;
                                            };
                                        } }),
                                    React.createElement("select", { className: "form-control", style: { display: this.isCustomUrl() ? 'none' : null }, ref: (e) => {
                                            if (!e)
                                                return;
                                            e.value = currentItem.url;
                                            e.onchange = () => {
                                                let option = e.options[e.selectedIndex];
                                                currentItem.url = option.value;
                                            };
                                        } }, links.map((o, i) => React.createElement("option", { key: i, value: o.url }, o.text))))),
                            React.createElement("div", { className: "form-group" },
                                React.createElement("div", { className: "col-sm-offset-2 col-sm-10" },
                                    React.createElement("input", { type: "checkbox", ref: (e) => {
                                            if (!e)
                                                return;
                                            e.value = currentItem.url || '';
                                            e.checked = this.isCustomUrl();
                                            e.onchange = () => {
                                                if (e.checked) {
                                                    currentItem.url = null;
                                                    this.setState({ currentItem });
                                                }
                                                else {
                                                    currentItem.url = "";
                                                    this.setState({ currentItem });
                                                }
                                            };
                                        } }),
                                    " \u81EA\u5B9A\u4E49\u94FE\u63A5"))),
                        React.createElement("div", { className: "modal-footer" },
                            React.createElement("button", { type: "button", className: "btn btn-default", "data-dismiss": "modal" }, "\u53D6\u6D88"),
                            React.createElement("button", { type: "button", className: "btn btn-primary", ref: (e) => {
                                    if (!e)
                                        return;
                                    e.onclick = ui.buttonOnClick(() => this.save());
                                } }, "\u786E\u5B9A")))));
        }
    }
});
